import React, { PureComponent } from 'react'
import QueueAnim from 'rc-queue-anim';
import TweenOne from 'rc-tween-one';
import OverPack from 'rc-scroll-anim/lib/ScrollOverPack';
import { Divider } from '../../widgets'

const firstImg = require('../../assets/liucheng/liucheng1.jpg')
const secondImg = require('../../assets/liucheng/liucheng2.jpg')
const thirdImg = require('../../assets/liucheng/liucheng3.jpg')
const arrowImg = require('../../assets/liucheng/liucheng_jiantou.png')

export default class extends PureComponent {
  static defaultProps = {
    className: 'content13',
  };

  getDelay = e => e % 3 * 100 + Math.floor(e / 3) * 100 + 300;


  render() {
    const props = { ...this.props };
    const isMode = props.isMode;
    delete props.isMode;
    const oneAnim = { y: '+=30', opacity: 0, type: 'from', ease: 'easeOutQuad' };

    const datas = [{
      type: "square",
      data: {
        one: firstImg,
        two: "线上/线下咨询并支付",
        three: "(需要您提供：法人/经营者身份证)"
      }
    },{
      type: "arrow",
      data: {
        one: "",
      }
    },{
      type: "square",
      data: {
        one: secondImg,
        two: "线上提交资料等待审核",
        three: ""
      }
    },{
      type: "arrow",
      data: {
        one: "审核通过",
      }
    },{
      type: "square",
      data: {
        two: "办理完成",
        three: "",
        one: thirdImg
      }
    }]


    const children = datas.map((sing, idx) => {
      const delay = this.getDelay(idx * 2);
      const liAnim = { opacity: 0, type: 'from', ease: 'easeOutQuad', delay };
      const childrenAnim = { ...liAnim, x: '+=10', delay: delay + 100,};
      const type = sing.type
      const { one ,two ,three } = sing.data || {}
      if( type === "square") {
        return (
          <TweenOne key={idx} className="cell" animation={{ ...childrenAnim}}>
            <img src={one} className="cellOne" />
            <div className="cellTwo">{two}</div>
            <div className="cellThree">{three}</div>
          </TweenOne>
        )
      } else if(type === "arrow") {
        return (
          <TweenOne key={idx} className="cell" animation={{ ...childrenAnim}}>
            <div key={idx} className="cellArrow">
              <div>{one}</div>
              <img src={arrowImg} className="cellArrowImage" />
              <div></div>
            </div>
          </TweenOne>
        )
      }
    });


    return (
      <div {...props} className={`content-template-wrapper ${props.className}-wrapper`}>
        <OverPack
          className={`content-template ${props.className}`}
          playScale="0.5"
          location={props.id}
        >
          <TweenOne
            key="h1"
            animation={oneAnim}
            component="div"
            className={`${props.className}-tit`}
          >
            <div className={`${props.className}-tit-t`}>办理流程</div>
            <Divider />
            <div style={{marginTop: "40px"}}>税管家只需要5个工作日帮您完成办理</div>
          </TweenOne>
          <div
            key="ul"
            // type="bottom"
            className={`${props.className}-contentWrapper`}
          >
            {
              children
            }
          </div>

        </OverPack>
      </div>
    )
  }
}
